<template>
    <div class="play-page ">
      <div class="two" :style="{ backgroundImage: `url( ${ currentSong.song ? currentSong.picUrl : currentSong.al.picUrl }?imageView=1&type=webp&thumbnail=247x0)`,
      }"></div>
        <PlayPageHeader @hhhhh="$emit('hhhhh')" :currentSong="currentSong" :playing="playing" />
        <PlayPageMiddle v-if="showDisc" @click.native="showDisc = false" :currentSong="currentSong" :playing="playing" />
        <PlayPageLyric v-else  @click.native="showDisc = true" :currentSong="currentSong" :currentTime="currentTime"/>
        <PlayPageBottomS />
        <PlayPageBottomM :currentSong="currentSong" :playing="playing"
        :currentTime="currentTime"
        :duration="duration" @update:currentTime="$emit('update:currentTime', $event);"/>
        <PlayPageBottomB :playing="playing" @play-ing="$emit('play-ing')" @pause-ing="$emit('pause-ing')"
        @next_sing="$emit('next_sing')" @last_sing="$emit('last_sing')" :currentPLayList="currentPLayList"/>
    </div>
</template>

<script>
import PlayPageHeader from '@/components/PlayPageHeader.vue'
import PlayPageMiddle from '@/components/PlayPageMiddle.vue'
import PlayPageBottomS from '@/components/PlayPageBottomS.vue'
import PlayPageBottomM from '@/components/PlayPageBottomM.vue'
import PlayPageBottomB from '@/components/PlayPageBottomB.vue'
import PlayPageLyric from '@/components/PlayPageLyric.vue'
export default {
    props: {
        currentSong: Object,
        playing: Boolean,
        currentTime: Number,
        duration: Number,
        currentPLayList: Array,
    },
    components: {
        PlayPageHeader,
        PlayPageMiddle,
        PlayPageBottomS,
        PlayPageBottomM,
        PlayPageBottomB,
        PlayPageLyric
    },
    data: function () {
    return {
      showDisc: true,
    };
  },
}
</script>

<style lang="less">
    .play-page {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
    }
    .two {
        z-index: -1;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgb(59, 59, 59);
        background-position: center center;
        background-size: cover;
        filter: blur(50px) brightness(0.6);
        transform: scale(2);
        background: no-repeat;
        background-size: 100% 100%;
    }
        
</style>